<template>
  <div class="newsinfo-container">
    <h3>详情</h3>
    <p>
      <span>发表时间:{{ info.time }}</span>
      <span>点击:{{ info.clickNumber }}次</span>
    </p>
    <hr />

    <div class="content">
      <img :src="info.src" />
    </div>
    <comment :id="id"></comment>
  </div>
</template>

<script>
//导入评论子组件
import Comment from './Comment.vue'
export default {
  data() {
    return {
      id: this.$route.params.id,
      info: {}
      //src:""
    };
  },
  created() {
    this.getDetail();
    //this.src = "../../lunbotu/mv" + this.$route.params.id + ".jpg";
    //console.log(this.info)
  },
  methods: {
    getDetail() {
      this.$axios.get("../../json/lunbotuDetail.json").then(res => {
        //    console.log(res.data[0].id);
        //    console.log(this.$route.params.id);
       this.info = res.data[this.$route.params.id -1];
       //console.log(this.info);
      });
    }
  },
  components: {
      'comment': Comment
  }
};
</script>

<style scoped>
.newsinfo-container {
  padding: 0 4px;
}
.newsinfo-container h3 {
  font-size: 16px;
  text-align: center;
  margin: 15px 0;
  color: red;
}
.newsinfo-container p {
  color: lightskyblue;
  display: flex;
  justify-content: space-between;
}
.newsinfo-container img {
    height: 350px;
    width: 100%;
}
</style>